<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>1.使用原生 dom 实现数据的双向绑定</title>
</head>

<body>
    <input type="text" id='aa' >
    <div id="app">{{message}}</div>
    <script>
        // console.log(document.getElementById('app').innerHTML)
        // console.log(document.getElementById('app').value)
        // console.log(document.getElementById('app').id)
        // console.log(document.getElementById('aa').value)
        var obj = {}; // 声明一个对象
        // 在对象上面添加hello属性
        Object.defineProperty(obj, 'hello', {
            set: function (val) {
                // 置hello属性的数值                  
                document.getElementById('app').innerHTML = val;  //innerHTML 属性设置或返回表格行的开始和结束标签之间的 HTML。
                document.getElementById('aa').value = val;
            }
        });
        console.log(obj)
        document.getElementById('aa').onkeyup = function (e) { //onkeyup 事件会在键盘按键被松开时发生,target 事件属性可返回事件的目标节点（触发该事件的节点），如生成事件的元素、文档或窗口。
            obj.hello = e.target.value;
        };
        obj.hello = "hello world";
        console.log(obj)
    </script>
</body>

</html>